body, * {
    padding: 0px;
    margin: 0px;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    background: rgb(26, 27, 30);
    font-family: "Segoe UI",SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif;
    color: #ffffff;
    text-shadow: 0px 2px 2px rgba(0,0,0,0.5);
}

a {
    text-decoration: none;
}

p {
    vertical-align: middle;
}

@import '@fortawesome/fontawesome-free/css/fontawesome.min.css';
@import '@fortawesome/fontawesome-free/css/brands.min.css';
@import '@fortawesome/fontawesome-free/css/solid.min.css';

@import 'components/header.css';
@import 'components/footer.css';
@import 'components/auth.css';

/* 
 * UI Components
 */
@import 'components/ui/button.css';
@import 'components/ui/slider.css';
@import 'components/ui/card.css';
@import 'components/ui/label.css';
@import 'components/ui/streamcomponent.css';
@import 'components/ui/progressbar.css';
@import 'components/ui/viewportgrid.css';
@import 'components/ui/breadcrumbbar.css';
@import 'components/ui/game/title.css';

@import 'components/sidebar/friends.css';
@import 'components/sidebar/frienditem.css';

@import 'components/achievement/row.css';
@import 'components/achievement/gamerow.css';

@import 'components/settings/sidebar.css';

/*  
 * Pages
 */

@import 'pages/xcloud/info/[titleid].css';
@import 'pages/settings/home.css';


div#app_body {
    /* position: fixed; */
    /* padding-top: 70px; */
    /* left: 0px; */
    width: 70vw;
    height: 100vh;
    /* bottom: 0px; */
    overflow-y: auto;
}

div#app_body_container{
    padding-top: 70px;
    /* position: relative; */
}

div#app_sidebar {
    position: fixed;
    top: 70px;
    right: 0px;
    width: 30vw;
    bottom: 0px;
    overflow-y: auto;

    backdrop-filter: blur(20px);
    background: rgba(0, 0, 0, 0.3);
}

h2.title {
    font-weight: 400;
    padding-top: 15px;
    padding-left: 10px;
    margin: 0px;
    font-size: 20px;
}

input.h2-search {
    float: right;
}

input.text {
    background: #000000;
    border-radius: 5px;
    padding: 10px;
    display: block;
    outline: none;
    color: #ffffff;
    margin-right: 10px;
    min-width: 200px;
    border: 2px solid #000000;
}

input.text:focus {
    border: 2px solid green;
}

/**
 Loading animation
**/

.lds-ring {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}
.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    margin: 8px;
    border: 8px solid green;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: green transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
}
@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}